
import ProTable from '@ant-design/pro-table';
import type { ProColumns } from '@ant-design/pro-table';
import { Modal } from 'antd';
import React, { useState } from 'react';
import {ProductType,NormalListParam} from '../../model';
import request from '@/utils/request';
import { manufacturerOption,manufacturerOptionOnly } from '@/utils/utils';

export type FormValueType = {
    target?: string;
    template?: string;
    type?: string;
    time?: string;
    frequency?: string;
  } & Partial<ProductType>;

  
export type ChooseProps = {
    onCancel: (flag?: boolean, formVals?: FormValueType) => void;
    onSubmit: (values: ProductType[]) => Promise<void>;
    modalVisible: boolean;
    values: any[];
  };

  
const ProductNameChoose: React.FC<ChooseProps> = (props)=>{

    async function queryProduct(params: NormalListParam) {
      params.pageSize=1000;
      var data =  request('/xwyl/product/productData', {
        params,
      });
      return data;
    }
    
    const [selectedRowsState, setSelectedRows] = useState<ProductType[]>();

    const rowSelection = {
      onChange: (key, selectedRows) => {
        setSelectedRows(selectedRows);
      },
      getCheckboxProps: (record) => {
        var index = props.values.findIndex((item)=>{
          return item.product_name === record.product_name;
        });
        if(index<0){
          return {
            disabled: false,
            name: record.name,
          }
        }else{
          return {
            disabled: true,
            name: record.name,
          }
        }
      }
    };
    
    const columns: ProColumns<ProductType>[] = [
        {
          title:'厂家',
          dataIndex: 'manufacturer',
          valueType:'select',
          hideInSearch:true,
          valueEnum:manufacturerOption(),
          width:80,
        },
        {
          title:'厂家',
          dataIndex: 'manufacturer',
          valueType:'select',
          hideInTable:true,
          valueEnum:manufacturerOptionOnly(),
          width:80,
        },
        {
          title:'产品名称',
          width:300,
          dataIndex: 'product_name',
        },
        {
          title: '单位',
          dataIndex: 'packing_unit',
          hideInSearch:true,
        },
      ];

    return (
      <Modal
        title="选择产品"
        width={1000}
        destroyOnClose={true}
        visible={props.modalVisible}
        onOk={()=>{
            var data = selectedRowsState.filter((item:any)=>{       
              return !item.choose;
            });
            props.onSubmit(data);
            setSelectedRows([]);
        }}
        onCancel={()=>{
            props.onCancel();
        }}
      >
        <ProTable<ProductType>
          headerTitle='产品列表'
          scroll={{ y: 300 }}
          toolBarRender={false}
          request={async(params, sorter, filter) =>
              queryProduct({ ...params, sorter, filter }).then(res=>{
                  //赠品模式下，首先把当前有的类型过滤下，然后把触发赠品的去掉
                 var obj = {};
                 res.data = res.data.reduce(function(item:any, next:any) {
                    obj[next.product_name] ? '' : obj[next.product_name] = true && item.push(next);
                    return item;
                 }, []);
                res.data=res.data;
                return res;
              })
          }
          columns={columns}
          rowKey="product_name"
          pagination={false}
          search={{
            filterType: 'query',
            layout: 'horizontal',
        }}
            rowSelection={{
              type: "checkbox",
              ...rowSelection,
            }}
          />
      </Modal>
    );
}
export default ProductNameChoose;